<template>
  <el-form :model="formData" class="zw-search-form" label-position="right" label-width="auto">
    <el-row class="el_filter_row" :gutter="20">
      <el-col :span="8">
        <el-form-item label="产品搜索">
          <el-input v-model="formData.product_name" suffix-icon="Search" placeholder="请输入产品名称" class="form-label"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="产品状态">
          <el-select v-model="formData.state" placeholder="请选择">
            <el-option v-for="item in violationType" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="产品品类">
          <el-cascader style="width: 100%" v-model="formData.category_id" :props="defaultProps" :options="groupOptions" @change="handleChangeCate" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="价格区间">
          ￥<el-input @blur="onHelpMoney(formData.price_range)" v-model="formData.price_range[0]" placeholder="请输入金额" oninput="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g, '')"></el-input><span> - </span>
          <el-input @blur="onHelpMoney(formData.price_range)" v-model="formData.price_range[1]" placeholder="请输入金额" oninput="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g, '')"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="库存状态">
          <el-select v-model="formData.stock_qty_state" placeholder="请选择">
            <el-option v-for="item in violationTypes" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <div class="onbtn">
          <el-form-item class="buttons">
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button class="clear" @click="resetForm">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold"  @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import { getCurrentInstance } from 'vue'
  import { ref, reactive } from 'vue'
  import { CatetList } from '@/api/salesleads/productmanagement/product'
  import { ElMessage } from 'element-plus'
  import { AFold, tableH, reSize } from '@/utils/utils'
  const value = ref('')
  const formData = reactive({
    product_name: '', //产品名
    state: 'all', //产品状态 all-全部  1-下架 2-上架
    category_id: [], //产品分类id  all-全部
    price_range: [], //价格区间
    stock_qty_state: 'all', //库存状态 all-全部 1-正常 2-无库存
    page: 1, //分页页码，数字类型
    page_size: 10 //页记录数
  })
  const emit = defineEmits(['submitForm','getTableH'])
  const submitForm = () => {
    emit('updateList', {
      ...formData
    })
    console.log('666666666666666666')
  }
  const onHelpMoney = (v: any) => {
    if (Number(v[0]) > Number(v[1])) {
      formData.price_range = []
      ElMessage.error('金额必须大于首填金额')
    }
  }
  //重置
  const resetForm = () => {
    formData.product_name = ''
    formData.state = 'all'
    formData.category_id = []
    formData.price_range = []
    formData.stock_qty_state = 'all'
    emit(
      'updateList',
      {
        ...formData
      },
      true
    )
  }
  let violationType = [
    {
      id: 'all',
      name: '全部'
    },
    {
      id: '1',
      name: '下架'
    },
    {
      id: '2',
      name: '上架'
    }
  ]
  let violationTypes = [
    {
      id: 'all',
      name: '全部'
    },
    {
      id: '1',
      name: '正常'
    },
    {
      id: '2',
      name: '无库存'
    }
  ]
  const groupOptions = ref([])
  const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'id'
  }
  const cateListMap = new Map()
  const getCatetList = async (data: any) => {
    const res = await CatetList(data)
    groupOptions.value = res
    console.log(groupOptions.value, 'groupOptions.value')
    for (const cateItem of res) {
      cateListMap.set(
        cateItem.id,
        cateItem.children.map((item: any) => item.id)
      )
    }
  }
  const handleChangeCate = (val: any) => {
    console.log(val, 'formData.category_id')
    const childrenIds = []
    for (const id of val) {
      const ids = cateListMap.get(id)
      if (ids) {
        childrenIds.push(...ids)
      }
    }
    formData.category_id.splice(0, formData.category_id.length, ...[...val, ...childrenIds])
  }
  getCatetList()
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
</script>
<style lang="scss" scoped>
  .zw-search-form {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;
    .el-row {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      box-sizing: border-box;
      margin: -8px -10px;
      .el-col {
        margin: 8px 0;
        &:last-of-type {
          flex: auto;
          text-align: right;
        }
        .el-form-item {
          margin-bottom: 0;

          .el-form-item__label-wrap {
            .el-form-item__label {
              font-size: 14px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
          }

          .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
  :deep .el-form-item__content {
    display: flex;
  }
  .onbtn {
    display: flex;
    justify-content: flex-end;
  }
</style>
